<template>
	<view class="container">
		<view class="field-body" @click="handleSelect()">
		  <view class="field-value oneline-hide">{{ valueText ? valueText: placeholder }}</view>
		</view>
		<u-select v-model="show" :list="options" :default-value="defaultValue" @confirm="onConfirm"></u-select>
	</view>
</template>

<script>
	import Emitter from '@/uni_modules/vk-uview-ui/libs/util/emitter'
	import { isEmpty } from '@/utils/util'
	export default {
		name: 'SelectGender',
		mixins: [Emitter],
		emits: ['update:modelValue'],
		props: {
		  // 当前选中的值
		  modelValue: {
		    type: String,
		    default: 0
		  },
		  // 未选中时的提示文字
		  placeholder: {
		    type: String,
		    default: '请选择性别'
		  }
		},
		data(){
			return {
			  // 是否显示
			  show: false,
			  // 默认选中的值
			  defaultValue: [],
			  // 选中项内容(文本展示)
			  valueText: '',
			  // 级联选择器数据
			  options: [
				  {
					  value:1,
					  label:"男"
				  },
				  {
					  value:2,
					  label:"女"
				  }
			  ]
			}
		},
		watch: {
		  // 监听当前选中的值
		  modelValue(val) {
		    // 设置默认选中的值
			let index = parseInt(val)-1
			console.log(index)
		    this.valueText = this.options[index].label
		    this.defaultValue = val>0?[index]:[]
		  },
		},
		created() {
		},
		
		methods: {
			// 打开选择器
			handleSelect() {
			  this.show = true
			},
			onConfirm(value) {
			  // 记录选中的值
			  this.valueText = value[0].label
			  
			  this.$emit('update:modelValue', value[0].value)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
	  width: 100%;
	}
	
	.loading {
	  padding-left: 10rpx;
	  // text-align: center;
	}
</style>